import React,{Component} from 'react';
import axios from 'axios';
import { Card, WingBlank, WhiteSpace } from 'antd-mobile';

export default class TabDetail extends Component{
  constructor(props){
    super(props);
    this.state={
      list:[],

    }
  }
  getData=()=>{
    axios({
          url   : `http://localhost:3000/product/${this.props.match.params.id}`,
         method: 'get'
        }).then(res=>{

       this.setState({
        list:[this.state.list,res.data]
    })
       })
  }


  componentDidMount(){
    var headurl=this.props.match.path;
    if(headurl.match(/product/g).length>0){
      this.getData();
    }


  }
  render(){
    // console.log(this.state.list);
    const { Meta } = Card;
    const {carousel} = this.props;
    let jsx=[];
    for(var i=0;i<this.state.list.length;i++){
      if(this.state.list[i].text !=null ){
      jsx.push(
         <WingBlank size="lg">
         <WhiteSpace size="lg" />
      <Card>
      <Card.Header
        title={this.state.list[i].text}
        thumb={this.state.list[i].img}
        thumbStyle={{border:'1px solid black',borderRadius:'25px'
       }}
        extra={<span>{this.state.list[
          i].id}</span>}
      />
      <Card.Body>
        <div >{this.state.list[i].content}</div>
      </Card.Body>
    </Card>
    <WhiteSpace size="lg" />
  </WingBlank>
      ) }
    }




    return (
      <div>
        {jsx}

        </div>

    )}
}